<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <!-- <el-header class="header">
      <div class="header-left">
        <span class="logo">Admin Pro</span>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>控制台</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right">
        <el-dropdown>
          <div class="user-info">
            <el-avatar :size="36" :src="user.avatar"></el-avatar>
            <span class="username">{{ user.name }}</span>
            <i class="el-icon-arrow-down"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>消息中心</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-tooltip content="全屏" placement="bottom">
          <i class="el-icon-full-screen screen-icon" @click="toggleFullScreen"></i>
        </el-tooltip>
      </div>
    </el-header> -->

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 数据概览卡片 -->
      <el-row :gutter="20" class="data-overview">
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background-color: #409EFF;">
                <i class="el-icon-user"></i>
              </div>
              <div class="stat-info">
                <div class="stat-title">用户总数</div>
                <div class="stat-value">1,234</div>
                <div class="stat-trend">
                  <span class="up">↑ 12%</span> 较上月
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background-color: #67C23A;">
                <i class="el-icon-s-order"></i>
              </div>
              <div class="stat-info">
                <div class="stat-title">本月访客数量</div>
                <div class="stat-value">567</div>
                <div class="stat-trend">
                  <span class="up">↑ 5%</span> 较上月
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!-- <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background-color: #E6A23C;">
                <i class="el-icon-money"></i>
              </div>
              <div class="stat-info">
                <div class="stat-title">在线用户</div>
                <div class="stat-value">102</div>
                <div class="stat-trend">
                  <span class="up">↑ 8%</span> 较上月
                </div>
              </div>
            </div>
          </el-card>
        </el-col> -->
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background-color: #F56C6C;">
                <i class="el-icon-chat-dot-round"></i>
              </div>
              <div class="stat-info">
                <div class="stat-title">会议数量</div>
                <div class="stat-value">323</div>
                <div class="stat-trend">
                  <span class="down">↓ 3%</span> 较上月
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20" class="chart-area">
        <el-col :xs="24" :sm="24" :md="16" :lg="16">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="clearfix">
              <span>访问量趋势</span>
              <el-select v-model="chartTimeRange" size="mini" style="width: 120px; float: right;">
                <el-option label="最近7天" value="7"></el-option>
                <el-option label="最近30天" value="30"></el-option>
                <el-option label="最近90天" value="90"></el-option>
              </el-select>
            </div>
            <div class="chart-container">
              <line-chart :chart-data="lineChartData" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="clearfix">
              <span>本月会议</span>
            </div>
            <div class="chart-container">
              <pie-chart :chart-data="pieChartData" />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 快捷操作和最近活动 -->
      <el-row :gutter="20" class="bottom-area">
        <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card shadow="hover" class="quick-actions">
            <div slot="header" class="clearfix">
              <span>快捷操作</span>
            </div>
            <div class="action-buttons">
              <el-button type="primary" icon="el-icon-plus" size="small">新增用户</el-button>
              <el-button type="success" icon="el-icon-goods" size="small">发布商品</el-button>
              <el-button type="warning" icon="el-icon-s-promotion" size="small">发送通知</el-button>
              <el-button type="danger" icon="el-icon-setting" size="small">系统设置</el-button>
              <el-button type="info" icon="el-icon-document" size="small">生成报告</el-button>
              <el-button type="primary" icon="el-icon-refresh" size="small">刷新缓存</el-button>
            </div>
          </el-card>
        </el-col> -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card shadow="hover" class="recent-activities">
            <div slot="header" class="clearfix">
              <span>最近活动</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button> -->
            </div>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.timestamp">
                {{activity.content}}
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import LineChart from './components/LineChart'
import PieChart from './components/PieChart'

export default {
  name: 'Dashboard',
  components: {
    LineChart,
    PieChart
  },
  data() {
    return {
      user: {
        name: '管理员',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      },
      chartTimeRange: '7',
      lineChartData: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
      },
      pieChartData: [
        { value: 24, name: '临床科室' },
        { value: 35, name: '医技科室' },
        { value: 80, name: '机关职能科室' },
        { value: 84, name: '研究所' },
        { value: 30, name: '教研室' }
      ],
      activities: [
        {
          content: '系统升级至 v3.0.0 版本',
          timestamp: '2025-05-12',
          type: 'primary',
          icon: 'el-icon-magic-stick'
        },
        {
          content: '您有新的会议需参加！',
          timestamp: '2025-05-10 20:46',
          type: 'success',
          icon: 'el-icon-shopping-cart-2'
        },
        {
          content: '服务器进行了例行维护',
          timestamp: '2025-05-05',
          type: 'info',
          icon: 'el-icon-cpu'
        },
        {
          content: '检测到异常登录，IP: 192.168.1.100',
          timestamp: '2025-04-25 08:18',
          type: 'warning',
          icon: 'el-icon-warning'
        },
        {
          content: '新部门 研究所 注册成功',
          timestamp: '2025-04-24 14:10',
          type: '',
          icon: 'el-icon-user'
        }
      ]
    }
  },
  methods: {
    logout() {
      this.$confirm('确定退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
        // 这里应该调用退出登录的API
        // 然后跳转到登录页
        this.$router.push('/login')
      })
    },
    toggleFullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}

.header {
  height: 60px;
  line-height: 60px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;

  .header-left {
    display: flex;
    align-items: center;

    .logo {
      font-size: 20px;
      font-weight: bold;
      color: #409EFF;
      margin-right: 20px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;

      .username {
        margin: 0 8px 0 12px;
        font-size: 14px;
      }
    }

    .screen-icon {
      margin-left: 20px;
      font-size: 18px;
      color: #666;
      cursor: pointer;

      &:hover {
        color: #409EFF;
      }
    }
  }
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.data-overview {
  margin-bottom: 20px;

  .stat-card {
    margin-bottom: 20px;
    border-radius: 4px;
    border: none;

    .stat-content {
      display: flex;
      align-items: center;

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        color: white;
        font-size: 20px;
      }

      .stat-info {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 5px;
        }

        .stat-value {
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .stat-trend {
          font-size: 12px;
          color: #909399;

          .up {
            color: #67C23A;
          }

          .down {
            color: #F56C6C;
          }
        }
      }
    }
  }
}

.chart-area {
  margin-bottom: 20px;

  .chart-card {
    border-radius: 4px;
    border: none;

    .chart-container {
      height: 300px;
    }
  }
}

.bottom-area {
  .quick-actions {
    border-radius: 4px;
    border: none;

    .action-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
  }

  .recent-activities {
    border-radius: 4px;
    border: none;
  }
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    height: auto;
    padding: 10px;

    .header-left, .header-right {
      width: 100%;
      justify-content: space-between;
      margin: 5px 0;
    }
  }

  .data-overview .el-col {
    margin-bottom: 15px;
  }
}
</style>